<template>
    <div class="tableWrapper">
        <el-row>
          <el-form :model="searchForm" :inline="true" class="search">
            <!-- <el-form-item class="first">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddSbbmData">添加设备编码</el-button>
            </el-form-item> -->
            <el-form-item label="设备编码">
              <el-input size="mini" v-model="searchForm.tdsbmSearch" @keyup.enter.native="getSbbmTableList">
              </el-input>
            </el-form-item>
            <el-form-item label="设备名称">
              <el-input size="mini" v-model="searchForm.tdsbmcSearch" @keyup.enter.native="getSbbmTableList">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" icon="el-icon-search" @click="getSbbmTableList">查询</el-button>
              <el-button size="mini" type="primary" icon="el-icon-refresh-right" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="dwbmTableBtn">
          <el-button
            type="primary"
            icon="el-icon-setting"
            size="mini"
            class="columnBtn"
            @click="cccEvent('show', sbbmColumnTable)"
          >配置列</el-button>
          <el-button class="exportBtn" type="primary" icon="el-icon-download" @click="cccEvent('export', sbbmColumnTable)" size="mini">导 出</el-button>
        </div>
        <div class="tableDiv">
          <el-table :data="sbbmData" ref="tableSbbm" border style="width: 100%;" height="100%" @sort-change="changeTableSort" v-loading="loading">
            <template v-for="col in sbbmColumnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="col.id"
                :prop="col.field"
                :label="col.title"
                :min-width="col.minWidth"
                :align="col.align"
                :header-align="col.align"
                :sortable="col.sortable"
                :formatter="col.formatter"
                :fixed="col.fixed"
              ></el-table-column>
            </template>
            <!-- <el-table-column align="center" fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleEditSbbm(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDeleteSbbm(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div v-show="!loading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchForm.current" :page-size="searchForm.size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>

        <AddSbbmData :propAddData="propAddData" @updateSbbmDataList="updateSbbmDataList"></AddSbbmData>
        <EditSbbmData :propEditData="propEditData" @updateSbbmDataList="updateSbbmDataList"></EditSbbmData>
        <ccc ref="ccc"></ccc>	
    </div>
</template>
<script>
import { codeModulePrefix } from '../../../../config';
import { deleteTdsbbm, getTdsbbmTable, getTdsbbmGyTable } from '@/api/dmgl/sbbm.js';
import AddSbbmData from './AddSbbmData.vue';
import EditSbbmData from './EditSbbmData.vue';
import ccc from "@/dialogCommom/ccc";
export default {
    data() {
      return {
        activeName: 'zy',
        searchForm: {
          current: 1,
          size: 10,
          tdsbmSearch: '',
          tdsbmcSearch: '',
          tdsbmLike: '',
          sbflLike: '',
          descs: [],
          ascs: []
        },
        total: 0,
        sbbmData: [],
        loading: false,
        propAddData: { // 传给添加设备原因编码组件的值
          sbbmDataDialogFormVisible: false
        },
        propEditData: { // 传给修改设备原因编码组件的值
          sbbmDataDialogFormVisible: false,
          obj: {}
        },
        sbbmColumnTable: 'code_sbbm', // 设备编码列配置参数
        sbbmColumnData: [] //设备编码表格列数据
      }
    },
    components: {
      AddSbbmData,
      EditSbbmData,
      ccc
    },
    props: {
      propData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propData: {
        deep: true,
        handler(newVal, oldVal) {
          const that = this
          that.searchForm.tdsbmLike = newVal.tdsbmLike
          that.searchForm.sbflLike = newVal.sbflLike
          that.activeName = newVal.activeName
          if (newVal.activeName == 'zy') {
            that.sbbmColumnTable = 'code_sbbm'
          } else {
            that.sbbmColumnTable = 'code_sbbm_gy'
          }
          that.cccEvent("load", this.sbbmColumnTable)
          that.getSbbmTableList()
        }
      }
    },
    mounted() {
      const that = this
      that.cccEvent("load", this.sbbmColumnTable)
      that.getSbbmTableList()
    },
    beforeUpdate () { 
      //解决列配置引发的滚动条问题
      this.$nextTick(()=>{
        this.$refs.tableSbbm.doLayout()
      }) 
  },
    methods: {  
      /** 重置 */
      reset() {
        const that = this
        that.searchForm.tdsbmSearch = ''
        that.searchForm.tdsbmcSearch = ''
        that.searchForm.current = 1
        that.searchForm.size = 10
        that.getSbbmTableList()
      },

      /** 获取设备原因编码列表 */
      async getSbbmTableList() {
        const that = this
        that.loading = true
        let res = null
        if (that.activeName == 'zy') {
          res = await getTdsbbmTable(that.searchForm)
        } else {
          res = await getTdsbbmGyTable(that.searchForm)
        }
        if (res.code == 0) {
          that.sbbmData = res.data.records
          that.total = res.data.total
          that.loading = false
        } else {
          that.$message.error(res.message)
        }
      },

      /** 添加设备原因编码 */
      handleAddSbbmData() {
        const that = this
        let propAddData = {
          sbbmDataDialogFormVisible: true
        }
        that.propAddData = JSON.parse(JSON.stringify(propAddData))
      },

      /** 编辑设备原因编码 */
      handleEditSbbm(row) {
        const that = this
        let propEditData = {
          sbbmDataDialogFormVisible: true,
          obj: row
        }
        that.propEditData = JSON.parse(JSON.stringify(propEditData))
      },

      /** 删除设备原因编码 */
      handleDeleteSbbm(row) {
        const that = this
        that.$confirm('是否确定删除该设备编吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTdsbbm(row.tdsbm).then(res => {
            if (res.code == 0 && res.data) {              
              that.getSbbmTableList()                          
              that.$message.success('删除成功')
            } else {
              that.$message.error(res.message)
            }
          })
        })
      },

      /** 添加设备原因编码组件和编辑设备原因编码组件回传更新设备编码列表 */
      updateSbbmDataList() {
        const that = this
        that.getSbbmTableList()
      },

      /** 统计分类标志转化 */
      tjbzmFormatter(row, column, cellValue) {
        switch(cellValue) {
          case '1':
            return '架空线路'
            break;
          case '2':
            return '电缆线路'
            break;
          case '3':
            return '变压器'
            break;
          case '4':
            return '断路器'
            break;
          case '5':
            return '开关'
            break;
          default:
            return ''
        }
      },

      /** 改变每页条数 */
      handleSizeChange(val) {
        const that = this
        that.searchForm.size = val
        that.getSbbmTableList()
      },

      /** 改变页数 */
      handleCurrentChange(val) {
        const that = this
        that.searchForm.current = val
        that.getSbbmTableList()
      },

      //列配置---临时任务事件---初始化页面
      cccEvent(method, table) {
        if (method === "show") {
          this.$refs.ccc.show(table);
        } else if (method === "load") {
          new Promise((resolve, reject) => {
            this.$nextTick(() => {
              resolve(this.$refs.ccc.load(table));
            });
          }).then(response => {
            let res = response
            response.forEach((item, index) => {
              if (item.sortable) {
                res[index].sortable = 'custom'
              }
            })
            this.sbbmColumnData = res;
          });
        } else if (method === "export") {
          let url = ''
          let fileName = ''
          if (this.activeName == 'zy') {
            url = `${codeModulePrefix}/dm-sbbm/page`
            fileName = '中压设备编码'
          } else {
            url = `${codeModulePrefix}/dm-sbbm-gy/page`
            fileName = '高压设备编码'
          }
          let vo = {
            tableCode: table,
            param: this.searchForm,
            url: url,
            method: "POST",
            fileName: fileName,
            total: this.total
          };
          this.$refs.ccc.exportExcel(vo);
        }
      },

      /** 排序 */
      changeTableSort(val) {
        const that = this
        if (val.order == 'descending') {
          that.searchForm.descs = ['tdsbm']
          that.searchForm.ascs = []
        } else {
          that.searchForm.descs = []
          that.searchForm.ascs = ['tdsbm']
        }
        that.getSbbmTableList()
      }
    }
}
</script>
<style lang="scss" scoped>
.tableWrapper {
  height: 100%;
}
.tableDiv {
  padding-top: 2px;
  height: calc(100% - 116px)
}

.select /deep/ .el-input--small .el-input__inner {
  width: 90px;
}
.pagination-container {
  padding-top: 6px;
  text-align: center;
}
.dwbmTableBtn {
  text-align: right;
  margin-bottom: 1px;
}
.search /deep/ .el-form-item {
  margin-bottom: 7px;
  margin-top: 0px;
}
.search /deep/ .el-form-item__label {
  line-height: 41px;
}
</style>